html {
	width:100%;
	height:100%;
	max-width:1920px;
	max-height:1200px;
}


/*START LINK STATE _______________________________*/
/* unvisited link */
a:link {
	color: black;
	text-decoration: none;
}

/* visited link */
a:visited {
	color: black;
}

/* mouse over link */
a:hover {
	color: gray;
	opacity: .5;
}

/* selected link */
a:active {
	color: black;
	/*animation: load 2s backwards;*/
}




a2:hover {
	opacity:.5;
}
/*END LINK STATE _______________________________*/





@font-face {
	font-family: NeueHaasDisplayBlack;
	src: url(font/NeueHaasDisplayBlack.ttf);
}

@font-face {
	font-family: NeueHaasDisplayRoman;
	src: url(font/NeueHaasDisplayRoman.ttf);
}

.picture{
	width:  ;
	height:  ;
}


/*START ----------------------- loading animation*/
.load {
	display: flex;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	background-color: #F7F8F9;
	width: 100%;
	/*max-width: 1920px;*/
	height: 100%;
	/*max-height:1200px;*/
	overflow: hidden;
	z-index: 100;
	animation: load-2 4s forwards;
	animation-delay: .5s;
}
.load-2 {
	display: flex;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	background-color: #F7F8F9;
	width: 100%;
	/*max-width: 1920px;*/
	height: 100%;
	/*max-height: 1200px;*/
	overflow: hidden;
	z-index: 100;
	animation: load-3 1.5s forwards;
	animation-delay: .5s;
	display:;
}
.load.i1-2{

}
@keyframes load {
	0% {
		width: 100%;
		left: 0px;
	}
	90% {
		
	}
	100% {
		width: 0px;
		left: 100%;
	}
}
@keyframes load-2 {
	0% {
		height: 100%;
		top: 0px;
		opacity:1;
		display:flex;
	}

	20% {
		opacity: 1;
		display: flex;
	}
	95% {
		opacity: 0;
		z-index:100;
	}
	100% {
		height: 100%;
		top:0%;
		opacity:0;
		display:none;
		z-index:-100;
	}
}
@keyframes load-3 {
	0% {
		height: 100%;
		top: 0px;
		opacity: 1;
	}

	20% {
		top:0op;
		opacity: 1;
	}
	70%{
		top:0px;
	}
	95% {
		opacity: 1;
		z-index: 100;
		top:-100%
	}

	100% {
		height: 100%;
		top: -100%;
		opacity: 0;
		display: none;
		z-index: -100;
	}
}
/*new animations for the start page*/


.index-text {
	position: relative;
	opacity: 0;
	animation: index 1.5s forwards;
	font-size: 4vw;
}
.index-anima-1 {
	position: relative;
	opacity: 0;
	animation: index 1.5s forwards;
	animation-delay: .5s;
	font-size: 4vw;
}
.index-anima-2 {
	position: relative;
	opacity: 0;
	animation: index 1.5s forwards;
	animation-delay: 1s;
	font-size: 4vw;
}
.index-anima-3 {
	position: relative;
	opacity: 0;
	animation: index 1.5s forwards;
	animation-delay: 1.5s;
	font-size: 4vw;
}

@media screen and (min-width: 800px) {
	.index-anima-1 {
		font-size: 40px;
	}
	.index-anima-2 {
		font-size: 40px;
	}
	.index-anima-3 {
		font-size: 40px;
	}
	.index-text {
		font-size: 40px;
	}
}



@keyframes index {
	0% {
		opacity: 0;
		top: 100px;
	}

	30% {
		opacity: 1;
	}

	50% {
		opacity: 1;
		top: 0px;
	}

	100% {
		opacity: 1;
		top: 0px;
	}
}
.index-anima-main {
	position:relative;
	animation: index-out 1.5s forwards;
	animation-delay: 3s;
}
@keyframes index-out {
	0% {
		opacity: 1;
		top: 0px;
	}
	50%{
		opacity:0;
	}
	100% {
		opacity: 0;
		top: -50px;
	}
}
.index-anima-logo {
	position: relative;
	opacity: 0;
	animation: index-logo 1.5s forwards;
	animation-delay:3.5s;
}
@keyframes index-logo {
	0% {
		opacity: 0;
		top: 100px;
	}

	30% {
		opacity: 1;
	}

	50% {
		opacity: 1;
		top: 0px;
	}

	100% {
		opacity: 1;
		top: 0px;
	}
}
/*end new animations for the start page*/
/*loading text promt - center text*/
.loading-text-start {
	/*transform center to center*/

	position: relative;
	top: 45%;
	width: fit-content;
	height: 40px;
	z-index: 100;
	color: black;
	font-family: NeueHaasDisplayRoman;
	font-size: 30px;
	animation: loading 3s ease-in-out forwards;
	/* UI Properties */

	text-align: left;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
}
.loading-text {
	/*transform center to center*/

	position: relative;
	top: 45%;
	width: 46px;
	height: 40px;
	z-index: 100;
	color: black;
	font-family: NeueHaasDisplayRoman;
	font-size: 30px;
	animation: loading 2s ease-in-out forwards;
	/* UI Properties */

	text-align: left;
	letter-spacing: 0px;
	color: #000000;
	opacity: 1;
}

@keyframes loading {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}
/* END ----------------------  loading landing animation*/
.move-in {
	animation: move-in 1.3s ease-in-out forwards;
	animation-delay: .4s;
}
.move-in2 {
	animation: move-in 1.5s ease-in-out forwards;
	animation-delay:.6s;
}
.move-in-h1 {
	animation: move-in 2s ease-in-out forwards;
	animation-delay: .8s;
}
.move-in-p1 {
	animation: move-in 2s ease-in-out forwards;
	animation-delay: 1s;
}
.move-in-info {
	animation: move-info 2s ease-in-out forwards;
	animation-delay: 1s;
}
.move-in-btn {
	animation: move-in 2s ease-in-out forwards;
	animation-delay: 1.2s;
}
.zoom-in {
	animation: zoom-in 1.8s ease-in-out forwards;
	animation-delay: .4s;
}
@keyframes move-in {
	0% {
		transform: translateX(110px);
	}

	

	100% {
		transform:translateX(0px);
		
	}
}
@keyframes move-info {
	0% {
		transform: translateX(0px);
	}



	100% {
		transform: translateX(-110px);
	}
}
@keyframes zoom-in {
	0% {
		transform: scale(150%);
	}



	100% {
		transform: scale(100%);
	}
}
.move-in-team {
	animation: move-up 2s ease-in-out forwards;
	animation-delay:1s;
}

@keyframes move-up {
	0% {
		transform: translateY(110px);
	}



	100% {
		transform: translateY(0px);
	}
}



.Content {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	/*min-height: 1200px;*/
	/*max-width:1920px;*/
	margin: 0px;
	padding: 0px;
	/*background-color: blue;*/
	overflow: scroll;
	/* Hide vertical scrollbar */
	font-family: NeueHaasDisplayRoman;
}
.menu-x{
	display:none;
	z-index:999;
	position:fixed;
	left:0;
	top:-62px;
	height:62px;
	width:100px;
	background-color:;
}
.menu {
	position: fixed;
	top: 0px;
	left: -218px;
	width: 318px;
	height: 100%;
	/*max-height: 1200px;*/
	background-color: #F7F8F9;
	overflow: hidden;
	z-index: 20;
	color: #623432;
}
@keyframes menu {
	0% {
		left: -218px;
	}

	100% {
		left: 0px;
	}
}
.menu:hover {
		animation: menu 1s ease-in-out forwards;
}
	.menu:hover .menu-logo{
		
	animation:logo 1s ease-in-out forwards;
}

@keyframes logo{
	0%{
		width:46px;
	}
	100%{
		width:283px;
	}
}

@keyframes links {
	0% {
		left:-200px;
		opacity:0;
	}
	60%{
		opacity:0;
	}

	100% {
		left: 100px;
		opacity:1;
	}
}

.menu:hover .links{
	animation:links 1s ease-in-out forwards;
}
	
@keyframes menu-btn{
	0% {
		left: 240px;
	}

	100% {
		left: -100px;
	}
}
	
.menu:hover .nav-btn-lines{
	animation: menu-btn 1s ease-in-out forwards ;
}
.menu:focus .nav-btn-lines {
	animation: menu-btn 1s ease-in-out forwards;
}
.menu:active .nav-btn-lines {
	animation: menu-btn 1s ease-in-out forwards;
}

.menu-logo {
	position: fixed;
	top: 40px;
	left: 27px;
	width: 46px;
	height: 43px;
	margin: 0px;
	padding: 0px;
	margin-bottom: 18px;
	/*background-color: blue;*/
	overflow: hidden;
}

.links {
	transform-origin:0% 50%;
	position: relative;
	top: 45%;
	left: -200px;
	width: 117px;
	height: 200px;
	margin: 0px;
	padding: 0px;
	margin-bottom: 30px;
	/*background-color: blue;
	 font*/
	letter-spacing: 1.68px;
	color: #000000;
	text-transform: uppercase;
	opacity: 1;
}
.links ul {
	color: #000000;
	padding: 0;
	margin: 0;
	position: inherit;
	font: normal;
	font-family: NeueHaasDisplayRoman;
}

	.links li {
		color: #000000;
		position: relative;
		top: 0px;
		left: 0px;
		width: 117px;
		height: 19px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 30px;
		/*background-color: green;*/
		list-style: none;
	}

li{
	list-style-position:outside;
}
ul{
	list-style-position:inside;
	padding: 0 0 0 20px;
}
div li{
	list-style-position:outside;
}

.l1 {
	animation: move-L 1.5s ease-in-out forwards;
	animation-delay: .6s;
}

.l2 {
	animation: move-L 2s ease-in-out forwards;
	animation-delay: .8s;
}

.l3 {
	animation: move-L 2s ease-in-out forwards;
	animation-delay: 1s;
}

.l4 {
	animation: move-L 2s ease-in-out forwards;
	animation-delay: 1.2s;
}

@keyframes move-L {
	0% {
		transform: translateX(-60px);
	}



	100% {
		transform: translateX(0px);
	}
}
.nav-btn-lines {
	display:grid;
	/*transform center to center*/
	transform: translate(0%, -50%);
	position: absolute;
	align-content: center;
	z-index: 20;
	width: 45px;
	height: 20px;
	background-color: #F7F8F9;
	padding: 0px;
	top: 50%;
	left: 240px;
}
.menu-img {
	background-image: url("Pictures/Burgericon.svg");
	/*background-color:green;*/
	background-repeat:no-repeat;
	width: 45px;
	height: 22px;
	border: none;
}


.sprache {
	position: absolute;
	top: 95%;
	left: 38px;

	height: 21px;
	margin: 0px;
	padding: 0px;
	margin-bottom: 18px;
	/*background-color: blue;
	font*/
	font-size: 16px;
	text-align: left;
	font-family: NeueHaasDisplayRoman;
	letter-spacing: 1.2px;
	color: #623432;
	opacity: 1;
	cursor:pointer
}
#eng{
	left:4.5rem;
}

.logo{
	width:245px;
	height:41px;
}
#start-logo{
	left:0px;
	background-size:40vw;
}
@media(max-width:1200px){
	#start-logo{
		background-size:70vw;
	}
}
.index-pic {
	background-image: url(Pictures/zp-start-web.jpg);
}
@media (max-width: 1200px){
	.index-pic {
		background-image: url(Pictures/zp-start-mob.jpg);
	}
}
.teams-pic {
	background-image: url(Pictures/team_web.jpg);
}

@media (max-width: 1200px) {
	.teams-pic {
		background-image: url(Pictures/team_mob.jpg);
	}
}
.intro-pic{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-image:url('Pictures/Intro.jpg');
	background-position:center;
	background-size:cover;
}
.menu-pic {
	position: absolute;
	top: 0px;
	left: 100px;
	width: 100%;
	/*max-width:1820px;*/
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	/*background-color: red;*/
}
@media (max-width: 1200px) {
	.team-pic {
		background-position-y: -59vw;
	}
}
	.logo-name {
		position: absolute;
		top: calc(50vh - 14px);
		left: 100px;
		height: 28px;
		width: 100%;
		animation-delay: 2s;
		display: grid;
		align-items: center;
		justify-items: center;
		background-size: contain;
		background-image: url(Pictures/icons/zup_wortmarke.svg);
		background-position: center;
		background-repeat: no-repeat;
	}

	@media (max-width: 1200px) {
		.logo-name {
			top: 22vh;
			left: 0px;
			height: 30px;
			animation-delay: 2s;
			display: grid;
			align-items: center;
			justify-items: center;
			background-size: contain;
			background-image: url(Pictures/icons/zup_wortmarke.svg);
			background-position: center;
			background-repeat: no-repeat;
		}
	}
@media (max-width: 450px) {
	.logo-name {
		height:20px;
	}
}
	.text-pic {
		position: absolute;
		top: 0px;
		left: 100px;
		width: calc(50% - 100px);
		height: 100%;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		/*background-color: red;*/
	}





#pic-1 {
	overflow: visible;
	animation: 1s ease 0s 1 normal forwards running pic-2;
}
#unternehmen {
	overflow: hidden;
}
.pic-2 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: clip;
}
.pic-3 {
	position: absolute;
	top: 100%;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: clip;
}
.pic-4{
	display:none;
}
@keyframes pic-1 {
	0% {
		transform: translateY(-0)
	}

	100% {
		transform:translateY(-100%)
	}
}
@keyframes pic-2 {
	0% {
		transform:translateY(-100%)
	}

	100% {
		transform: translateY(-0)
	}
}
	.text-pic-2 {
		position: absolute;
		top: 0px;
		left: 100px;
		width: 100%;
		min-width: 1820px;
		height: 456px;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		
	}

	.text-pic-content {
		height: 100%;
		width: auto;
	}

	.text-pic-content-2 {
		position: absolute;
		/*top:-450px;*/
		height: auto;
		width: 100%;
	}

	.menu-pic-content {
		min-height: 100%;
		width: auto;
		min-width: 100%;
	}

	.text-box {
		position: absolute;
		top: 0px;
		left: 50%;
		width: 50%;
		height: 100%;
		margin: 0px;
		padding: 0px;
		/*background-color: pink;*/
	}

	@media (max-width: 1800px) {
		.text-box {
			left: ;
			background-color: white;
		}

		.text-content {
			left: 30%;
		}
	}



	.text-box-2 {
		position: absolute;
		top: 532px;
		left: 100px;
		max-width: 1820px;
		width: 100%;
		height: 50%;
		margin: 0px;
		padding: 0px;
	}

	.indicator {
		position: absolute;
		top: 116.5px;
		left: 87px;
		width: 78px;
		height: 39.5px;
		margin: 0;
		padding: 0;
		z-index: 18;
		/*background-color: green;*/
	}

	.indicator2 {
		position: absolute;
		top: 58px;
		right: 4%;
		width: 78px;
		height: 39.5px;
		margin: 0;
		padding: 0;
		z-index: 20;
		/*background-color: green;*/
	}

	.i1 {
		position: relative;
		top: 0px;
		left: 0px;
		width: 100px;
		height: 19px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 15px;
		/*background-color: blue;
	font*/
		text-align: left;
		font-size: 16px;
		font-family: NeueHaasDisplayRoman;
		letter-spacing: 1.68px;
		color: #262626;
		text-transform: uppercase;
		opacity: 1;
	}

	.i2 {
		position: relative;
		top: -5px;
		left: 0px;
		width: 36px;
		height: 8px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 0px;
		/*background-color: green;*/
	}

	.i3 {
		position: relative;
		top: -5px;
		left: 0px;
		width: fit-content;
		height: 8px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 0px;
		/*background-color: green;*/
	}

	.i1-2 {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 100px;
		height: 19px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 6px;
		/*background-color: blue;
	font*/
		text-align: right;
		font-size: 16px;
		font-family: NeueHaasDisplayRoman;
		letter-spacing: 1.68px;
		color: #FFFFFF;
		text-transform: uppercase;
		opacity: 1;
	}

	.i2-2 {
		position: absolute;
		top: 30px;
		right: 0px;
		width: 36px;
		height: 8px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 0px;
		/*background-color: green;*/
	}

	.text-content {
		position: relative;
		top: 102px;
		left: 100px;
		width: calc(100% - 200px);
		max-width: ;
		height: 75vh;
		max-height: ;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
		/*background-color: green;
	font*/
		font-family: NeueHaasDisplayRoman;
		box-shadow: none;
	}

	.text-content-2 {
		position: relative;
		top: 0px;
		left: 177px;
		width: 80%;
		height: fit-content;
		margin: 0px;
		padding: 0px;
		/*background-color: green;
	font*/
		font-family: NeueHaasDisplayRoman;
	}

	.text {
		max-height: calc(100vh - 250px);
		overflow: scroll;
		overflow-x: hidden;
	}

	@media (max-height: 850px) {
		.text {
			height: calc(100vh - 250px);
			overflow: scroll;
			overflow-x: hidden;
		}
	}

	.scroll-box {
		position: sticky;
		background-image: linear-gradient(transparent, white);
		bottom: 0px;
		width: 100%;
		height: 200px;
		/*background-color: rgba(0, 0, 0, 0.5)*/
	}

	@media (min-height: 1500px) {
		.scroll-box {
			display: none;
		}
	}

	.scroll-icon {
		transform: translate(-50%, 0%);
		position: relative;
		left: 50%;
		top: 145px;
		height: 36.5px;
		width: 17px;
	}

	.info {
		position: relative;
		left: 110px;
		top: 0px;
		width: 100%;
		height: 77px;
		margin-bottom: 49px;
		cursor: pointer;
	}

	.info-sub {
		width: 320px;
	}
	/* hover topics*/
	/* topic1*/
	#info-t1:hover {
		animation: blink .1s forwards;
	}

		#info-t1:hover #icon-1 {
			animation: blink .1s forwards;
		}
	/* topic2*/
	#info-t2:hover {
		animation: blink .1s forwards;
	}

		#info-t2:hover #icon-2 {
			animation: blink .1s forwards;
		}
	/* topic3*/
	#info-t3.hover {
		animation: blink .1s forwards;
	}

	#info-t3:hover #icon-3 {
		animation: blink .1s forwards;
	}
	/* topic4*/
	#info-t4:hover {
		animation: blink .1s forwards;
	}

		#info-t4:hover #icon-4 {
			animation: blink .1s forwards;
		}
	/* topic5*/
	#info-t5:hover {
		animation: blink .1s forwards;
	}

		#info-t5:hover #icon-5 {
			animation: blink .1s forwards;
		}


	.icon-g {
		opacity: 0;
	}

	@keyframes blink {
		0% {
			opacity: .3;
		}

		100% {
			opacity: 1;
		}
	}
	/* content swap*/
	@keyframes infoswap {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes infoswap2 {
		100% {
			opacity: 0;
		}

		0% {
			opacity: 0;
		}
	}

	.btn-info-down {
		display: none;
	}

	#info-off {
		display: none;
	}

	.details {
		position: absolute;
		left:;
		right: 2%;
		top: 0px;
		width: 627px;
		height: fit-content;
		margin-bottom: 0px;
		opacity: 0;
	}

	#details-1 {
		top:;
		opacity: 1;
	}

	#details-2 {
		top: -126px;
	}

	#details-3 {
		top: -252px;
	}

	#details-4 {
		top: -378px;
	}

	#details-5 {
		top: -504px;
	}

	.float-content {
		position: absolute;
		top: 30vh;
		right: 5%;
		height: 578px;
		width: 446px;
		color: #FFFFFF;
	}

	@media (max-height: 1100px) {
		.float-content {
			top: 28vh;
		}
	}

	@media (max-height: 900px) {
		.float-content {
			top: 25vh;
		}
	}

	@media (max-height: 800px) {
		.float-content {
			top: 18vh;
		}
	}

	.float-text {
		position: relative;
		top: 0;
		/*height:94px;*/
		margin-bottom: calc((100vh - 310px) * 0.14);
		text-align: right;
	}

	.float-text-line {
		height: 90%;
	}

	.profil-content {
		position: relative;
		top: 79px;
		left: 100px;
		width: calc(100% - 200px);
		height: 75vh;
		margin: 0px;
		padding: 0px;
		overflow-y: scroll;
      	overflow-x: hidden;
		/*background-color: green;
	font*/
		font-family: NeueHaasDisplayRoman;
	}

	@media(max-width:1200px){
		stop:0px;
	}
	.datenschutz-text{
		opacity:0.6;
	}

	.kontakt-info {
		position: absolute;
		top: 614px;
		left: -14px;
		height: 100px;
		width: 50px;
		/*background-color: red;*/
		/*font*/
		text-align: center;
		font-size: 18px;
		font-family: NeueHaasDisplayRoman;
		letter-spacing: 1.92px;
		color: #000000;
		text-transform: uppercase;
		opacity: 1;
		line-height: 21px;
	}

	.kontakt-info-2 {
		position: relative;
		/*top: 20vh;*/
		left: 0px;
		margin-top: 7vh;
		/*background-color: red;*/
		/*font*/
		text-align: left;
		font-size: 18px;
		font-family: NeueHaasDisplayRoman;
		letter-spacing: 0.32px;
		color: #808080;
		opacity: 1;
		line-height: 21px;
	}
	/*
	@media (max-height: 1050px) {
	.kontakt-info-2 {
		top: 10vh;
	}
}
@media (max-height: 900px) {
	.kontakt-info-2 {
		top: 5vh;
	}
}
@media (max-height: 850px) {
	.kontakt-info-2 {
		top: 2vh;
	}
}
*/

	.adress-icon {
		position: absolute;
		top: 193px;
		left: -26px;
		height: 100px;
		width: 50px;
		/*background-color: red;*/
		/*font*/
		text-align: right;
		font-size: 16px;
		font-family: NeueHaasDisplayRoman;
		letter-spacing: 1.92px;
		color: #000000;
		text-transform: uppercase;
		opacity: 1;
		line-height: 21px;
	}

	.h1 {
		position: relative;
		top: 0px;
		left: 0px;
		width: 90%;
		max-width: 600px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 29px;
		/*background-color: blue;*/
		/*font*/
		text-align: left;
		font-size: 35px;
		font: NeueHaasDisplayRoman;
		letter-spacing: 0px;
		opacity: 1;
		line-height: 50px;
	}

	.h2 {
		position: relative;
		top: 0px;
		left: 0px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 48px;
		/*background-color: blue;*/
		/*font*/
		font-size: 16px;
		letter-spacing: 1.92px;
		opacity: 1;
		line-height: 21px;
		text-transform: uppercase;
	}

	.h3 {
		position: relative;
		top: 0px;
		left: 0px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 48px;
		/*background-color: blue;*/
		/*font*/
		font-size: 18px;
		letter-spacing: 2.4px;
		opacity: 1;
		line-height: 21px;
		text-transform: uppercase;
	}

	.h1-1 {
		position: absolute;
		top: 82px;
		left: 275px;
		width: 75%;
		max-width: 600px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 68px;
		/*background-color: blue;*/
		/*font*/
		text-align: left;
		font-size: 50px;
		font: NeueHaasDisplayRoman;
		letter-spacing: 0px;
		opacity: 1;
		line-height: 67px;
	}

	.h1-kontakt {
		/*margin-bottom: 135px;*/
		margin-bottom: 7vh;
	}

	.p1-kontakt {
		margin-bottom: 60px;
	}

	b {
		font: NeueHaasDisplayRoman;
	}

	.p {
		margin-top: 0px;
		margin-block-end: 0px;
	}

	.points {
		margin-top: 0px;
		margin-bottom: 10px;
		list-style-position:outside;
	}

	.p1 {
		position: relative;
		top: 0px;
		left: 0px;
		height:;
		margin: 0px;
		margin-right: 10px;
		padding: 0px;
		margin-bottom: 30px;
		/*background-color: blue;*/
		/*font*/
		letter-spacing: 0.32px;
		opacity: 1;
		line-height: 27px;
		color: black;
		font-size:18px;
	}

	.p2 {
		position: relative;
		top: 0px;
		left: 0px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 30px;
		/*background-color: blue;*/
		/*font*/
		letter-spacing: 0.32px;
		opacity: 1;
		line-height: 27px;
		font-size:18px;
	}

	.icon-g {
		position: absolute;
		left: -43px;
		top: 0px;
		width: 50px;
		height: 50px;
		margin-bottom: 0px;
	}

	.icon {
		position: absolute;
		left: -30px;
		top: 0px;
		width: 5px;
		height: 5px;
		margin-bottom: 0px;
	}
	.profil-points{
		display:flex;
		flex-wrap:nowrap;
		flex-direction:row;
		justify-content:flex-start;
		align-items:flex-start;
		margin-bottom:12px;
	}
	.point-text{
		margin:0px;

	}
	.icon-profil {
		position: relative;
		left: 0;
		top: 0;
		width: 5px;
		height: 10px;
		margin-bottom: 0px;
		margin-right: 15px;
		position: center;
		background-image: url('Pictures/Gruppe 1004.svg');
		background-repeat:no-repeat;
		margin-top:8px;
	}

	.p1-btn {
		position: relative;
		top: 0px;
		left: 0px;
		width: 169px;
		height: 19px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 30px;
		/*background-color: blue;*/
	}

	.btn-icon-1 {
		display: flex;
		position: relative;
		top: 18px;
		left: 0%;
		padding-left: px;
		width: fit-content;
		height: 25px;
		overflow: hidden;
	}

	.btn-icon-2 {
		display: flex;
		position: relative;
		top: 15px;
		left: 0%;
		padding-left: 0px;
		width: fit-content;
		height: 25px;
		overflow: hidden;
	}



	.btn-box {
		display: flex;
		justify-content: left;
		position: absolute;
		top: 1106px;
		left: 100px;
		width: fit-content;
		height: 50px;
		margin: 0px;
		padding: 0px;
		padding-top: 20px;
		padding-bottom: 30px;
		/*margin-bottom: 30px;*/
		/*background-color: green;*/
		background-color: white;
		/*font*/
		text-align: left;
		font-size: 16px;
		letter-spacing: 0px;
		color: #623432;
		opacity: 1;
		line-height: 21px;
	}

	@media (min-width: 1200px) {
		.btn-box {
			top: auto;
			bottom: 3%;
		}
	}

	.btn-box2 {
		display: flex;
		justify-content: right;
		position: absolute;
		top: 1106px;
		left: auto;
		right: 4%;
		width: 144px;
		height: 50px;
		margin: 0px;
		padding: 0px;
		margin-bottom: 30px;
		/*background-color: green;*/
		/*font*/
		text-align: left;
		font-size: 16px;
		letter-spacing: 0px;
		color: #623432;
		opacity: 1;
		line-height: 21px;
	}

	@media (min-width: 1200px) {
		.btn-box2 {
			top: auto;
			bottom: 3%;
		}
	}

	#btn-box-leistung {
		position: absolute;
		left: auto;
		right: 1%;
		top: 1106px;
		left: auto;
	}
	/* boutton move arrow*/
	@keyframes move-arrow {
		0% {
			transform: translateX(0px)
		}

		50% {
			transform: translateX(10px)
		}

		100% {
			transform: translateX(0px)
		}
	}

	.btn-all {
		cursor: pointer;
	}

		.btn-all:hover {
			opacity: .5;
		}

			.btn-all:hover .pfeil-all {
				animation: move-arrow 1.4s ease-in-out both;
			}

	@keyframes move-arrow-down {
		0% {
			top: 17px;
		}

		50% {
			top: 22px;
		}

		100% {
			top: 17px;
		}
	}

	.btn-up:hover .pfeil-down {
		animation: move-arrow-down 1.4s ease-in-out both;
	}

	.btn-1 {
		display: flex;
		justify-content: space-between;
		width: fit-content;
		min-width:220px;
		height: 50px;
		margin: 0px;
		padding: 0px;
		margin-right: 15px;
		background-color: #F7F5F5;
	}

	@keyframes move-arrow-back {
		0% {
			transform: translateX(0px)
		}

		50% {
			transform: translateX(-10px)
		}

		100% {
			transform: translateX(0px)
		}
	}

	.btn-back:hover .pfeil-back {
		animation: move-arrow-back 1.4s ease-in-out;
	}

	.btn-2 {
		width: 67px;
		height: 50px;
		margin: 0px;
		padding: 0px;
		margin-right: 0px;
		background-color: #F7F5F5;
	}

	.pfeil-1-alone {
		opacity: 1;
		position: relative;
		top: 18px;
		left: 25px;
		width: 35px;
		height: 15px;
		overflow: visible;
	}

	.btn-profil {
		position: absolute;
		right: 15px;
		top: 15px;
		width: 50px;
		height: 50px;
		margin: 0px;
		padding: 0px;
		margin-right: 0px;
		background-color: rgba(255,255,255,0.2);
	}

	@media (max-width: 1200px) {
		#team-picture {
			top: -20%;
		}
	}

	.team-btn {
		display: grid;
		/*	justify-content:center;*/
		align-content: center;
		position: absolute;
		left: 100px;
		top: 100%;
		width: 100%;
		height: 100%;
		/*
	max-width: 1820px;
	max-height: 1200px;
	*/

		background-color: rgba(0, 0, 0, 0.7);
		animation: team-load 2s ease-in-out forwards;
		animation-delay: 0.1s;
	}

	@keyframes team-load {
		0% {
			top: 100%;
		}

		100% {
			top: 0%;
		}
	}

	.btn-team-info {
		position: absolute;
		top: 36px;
		left: 30px;
		display: flex;
		justify-content: left;
		align-content: space-between;
		width: calc(100vw - 130px);
		height: 50px;
	}

	.team-kontakt-phone {
		opacity: 0;
		z-index: -10;
	}

	.btn-fon {
		position: relative;
		width: 217px;
		height: 50px;
		margin: 0px;
		margin-right: 15px;
		display: flex;
		justify-content: right;
		background-color: rgba(255,255,255,0.2);
		color: white;
		letter-spacing: 0.32px;
		opacity: 1;
		line-height: 27px;
	}

	.btn-mail {
		position: relative;
		width: 239px;
		height: 50px;
		margin: 0px;
		margin-right: 15px;
		display: flex;
		justify-content: right;
		background-color: rgba(255,255,255,0.2);
		color: white;
		letter-spacing: 0.32px;
		opacity: 1;
		line-height: 27px;
	}

	.btn-location {
		position: absolute;
		right: 30px;
		width: 276px;
		height: 50px;
		margin: 0px;
		margin-right: 0px;
		display: flex;
		justify-content: right;
		background-color: rgba(255,255,255,0.2);
		color: white;
		letter-spacing: 0.32px;
		opacity: 1;
		line-height: 27px;
	}

	.btn-team-up {
		position: absolute;
		top: 52px;
		right: 3%;
		align-content: start;
		background-color: rgba(255,255,255,0.2);
		width: 238px;
		height: 50px;
		margin: 0;
		display: flex;
		justify-content: left;
		color: white;
		letter-spacing: 0.32px;
		opacity: 1;
		line-height: 27px;
	}

	.btn-team-down {
		position: absolute;
		top: 52px;
		right: -3%;
		align-content: center;
		background-color: rgba(255,255,255,0.2);
		width: 50px;
		height: 50px;
		margin: 0;
		display: flex;
		justify-content: center;
		color: white;
		letter-spacbting: 0.32px;
		opacity: 1;
		line-height: 27px;
	}

	.btn-team-up:hover {
		opacity: .5;
	}

	.btn-team-down {
		opacity: 0;
	}

		.btn-team-down:hover {
			opacity: .5;
		}

	@keyframes team-up {
		0% {
		}

		100% {
			top: 0%;
		}
	}

	@keyframes team-down {
		0% {
			top: 0%;
		}

		100% {
			top: 87%;
		}
	}

	@keyframes team-up-down-out {
		0% {
			opacity: 1;
		}


		100% {
			opacity: 0;
		}
	}

	@keyframes team-up-down-in {
		0% {
			opacity: 0;
			right: -3%;
		}

		80% {
			opacity: 0;
			right: 3%;
		}

		100% {
			opacity: 1;
			right: 3%;
		}
	}

	.profil-box {
		position: relative;
		left: 30px;
		margin-right: 30px;
		/*top: 25%;*/
		width: calc(100vw - 160px);
		/*max-width: 1820px;*/
		/*height: calc(50vw + 50px);*/

		/*min-height: 500px;*/
		/*background-color: blue;*/
		display: flex;
		scroll-behavior: smooth;
		scrollbar-width: none;
		scrollbar-color: inherit;


		flex-flow: row wrap;
		justify-content: start;
		top: 0;
		margin-top: 55px;
		overflow-y: scroll;
		height: calc(100vh - 133px);
		/*background-color: red;*/
	}

	/* width */
	::-webkit-scrollbar {
		height: 1.5px;
		width: 0px;
	}

	/* Track */
	::-webkit-scrollbar-track {
		background-color: #E8E8EB;
		border-radius: 10px;
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
		background: #623432;
		border-radius: 10px;
		width: 100px;
		opacity: .3;
	}

		/* Handle on hover */
		::-webkit-scrollbar-thumb:hover {
			background: #623432;
		}

.profil {
	display: inline-table;
	/*aspect-ratio: 355/500;*/
	position: relative;
	left: 0;
	top: 0px;
	/*	width: fit-content;*/
	/*min-width: 300px;*/
	/*	min-height: 500px;*/
	/*max-width: 469px;
	height: 50%;
	max-height: 700px;*/
	/*		background-color: #E8E8EB;*/
	margin-right: 20px;
	overflow: clip;
}




.profil-text-box {
	display: grid;
	justify-content: center;
	align-content: center;
	text-align: center;
	position: relative;
	margin: 0px;
	/*top: -80px;*/
	bottom: 60px;
	left: 0px;
	/*width: 300px;
	min-width: 335px;*/
	width: calc(calc(100vw - 160px - 60px)/4);
	max-width: 469px;
	height: 60px;
	background-color: rgba(0, 0, 0, 0.75);
}

	.profil-text {
		position: relative;
		margin: 0px;
		width: 200px;
		letter-spacing: 0.32px;
		opacity: 1;
		line-height: 27px;
		color: #FFFFFF;
	}

	.profil-text-link {
		position: absolute;
		top: 400px;
		left: 40px;
	}

.team-pic {
	
	background-size: cover;
	position: absolute;
	top: 0px;
	left: 100px;
	width: calc(50% - 100px);
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
	@media(max-width:1200px;){
		.team-pic {
			background-position:top;
		}
	}
@media(max-width:600px;) {
	.team-pic {
		height:90vw;
	}
}


.profil-img {
	aspect-ratio: 335/500;
	width: calc(calc(100vw - 160px - 60px)/4);
	max-width: 469px;
	/*min-width:335px;*/
	/*min-height: 500px;*/
	max-height: 700px;
	/*height: 50vw;*/
	overflow: hidden;
	display: grid;
	justify-content: center;
	align-content: center;
}
.kontakt-pic {
	background-position:center;
}